<template>
  <!-- <div class="goods-item">
    <div class="goods-item-left">
      <van-checkbox
        v-model="goods.goods_checked"
        checked-color="#f46"
        class="goods-rido"
        @click="ischecked"
      ></van-checkbox>
      <img :src="goods.goods_img" alt="" />
    </div>
    <div class="goods-item-right">
      <div class="goods-name">{{ goods.goods_title }}</div>
      <div class="goods-skuDesc">
        颜色：{{ goods.goods_styleKey }};尺码：{{ goods.goods_sizeKey }};
      </div>
      <div class="goods-info-box">
        <div class="goods-price">￥{{ goods.goods_price }}</div>
        <van-stepper
          v-model="goods.goods_stock"
          input-width="25px"
          button-size="25px"
          @plus="addPrice"
          @minus="reducePrice"
        />
      </div>
    </div>
  </div> -->
  <div>
    <van-swipe-cell>
      <van-checkbox
        v-model="goods.goods_checked"
        checked-color="#f46"
        class="goods-rido"
        @click="ischecked"
        style="padding-left: 10px"
        v-if="condition"
      ></van-checkbox>
      <van-card
        :num="goods.goods_stock"
        :price="goods.goods_price.toFixed(2)"
        :desc="`${goods.goods_styleKeyName}：${goods.goods_styleKey} ${goods.goods_sizeKeyName}：${goods.goods_sizeKey}`"
        :title="goods.goods_title"
        class="goods-card"
        :thumb="goods.goods_img"
      ></van-card>
      <van-stepper
        v-model="goods.goods_stock"
        input-width="25px"
        button-size="25px"
        @plus="addPrice"
        @minus="reducePrice"
        class="goods-stepper"
        v-show="condition"
      />
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="delgoods"
          v-if="condition"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  props: {
    //商品对象
    goods: {
      type: Object,
    },
    condition: {
      type: Boolean,
    },
  },
  data() {
    return {};
  },
  methods: {
    ...mapMutations("m_cart", [
      "updateGoodsPrice",
      "updateGoodschecked",
      "delGoods",
    ]),
    addPrice() {
      this.updateGoodsPrice(this.goods);
    },
    reducePrice() {
      this.updateGoodsPrice(this.goods);
    },
    ischecked() {
      this.updateGoodschecked(this.goods);
    },
    // 删除商品
    delgoods() {
      this.delGoods(this.goods);
      // console.log(this.goods);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-swipe-cell__wrapper {
  display: flex;
  background-color: white;
  border-radius: 5px;
}
::v-deep .van-image__img {
  display: block;
  width: 92px;
  height: 110px;
}
::v-deep .van-card__price {
  color: #ff5577;
}
.goods-card {
  margin: 0;
  background-color: white;

  .van-card__header {
    height: 110px;
  }
}
.van-card__desc {
  width: fit-content;
  display: inline-block;
  min-height: 16px;
  max-height: 32px;
  line-height: 16px;
  max-width: 150px;
  padding: 0 11px 0 6px;
  background: #f7f7f7;
  border-radius: 5px;
  font-size: 10px;
  color: #ababab;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  -webkit-line-clamp: 1;
}
.van-card__title {
  min-height: 16px;
  max-height: 32px;
  line-height: 16px;
  margin-bottom: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  font-size: 12px;
  font-weight: 700;
  color: #333;
}
.delete-button {
  height: 100%;
  background-color: #ff5577;
  border: none;
  padding: 0 14px;
}
.goods-card {
  flex: 1;
}
.goods-stepper {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>